<template>
    <div class="menu line1px">
        <a v-for="(value,index) in menuList" href="javascript:;" :class="{ 'active' : iscur === index }" @click="iscur=index"><span class="t">{{value.name}}</span></a>
    </div>

</template>
<script type="text/javascript">

export default {
    data() {
        return {
            iscur: 0,
            menuList: [
                {name: "全部", path: "index"},
                {name: "精华",path: "good"},
                {name: "分享",path: "share"},
                {name: "问答",path: "ask"},
                {name: "招聘",path: "job"},
            ]
        }
    },
    beforeCreate() {


    },
    watch: {
        iscur() {
            console.log(this.iscur)
        }
    }

}
</script>
<style scoped>
.menu {
    height: 1.2rem;
    line-height: 1.2rem;
    background-color: #fff;
    width: 100%;
    text-align: center;
    display: flex;
}
.menu.line1px:before {
    top: inherit;
    bottom: 0;
}
.menu a {
    flex:1;
    justify-content: center; 
    vertical-align: middle;
    text-align: center;
    color: #7d7966;
}
.menu a {
    background-repeat: no-repeat;
    background-size: .5rem .5rem;
    background-position: center .2rem;
}
.menu a.active{
    color: #271f00;
}
.menu a span {
    padding: .2rem;
    box-sizing: border-box;
}
.menu a.active span{
    background-color: #ccc;
    border-radius: .1rem;
}
</style>